import { reactive, watch } from 'vue'
import { defineStore } from 'pinia'
import { getSidebarStatus, setSidebarStatus } from '@/utils/local-storage'

const handleSidebarStatus = opened => setSidebarStatus(opened)

export const useAppStore = defineStore('app', () => {
  const sidebar = reactive({
    opened: getSidebarStatus(),
    withoutAnimation: true,
  })

  watch(
    () => sidebar.opened,
    opened => handleSidebarStatus(opened),
  )

  const toggleSidebar = withoutAnimation => {
    sidebar.opened = !sidebar.opened
    sidebar.withoutAnimation = withoutAnimation
  }
  const closeSidebar = withoutAnimation => {
    sidebar.opened = false
    sidebar.withoutAnimation = withoutAnimation
  }

  return { sidebar, toggleSidebar, closeSidebar }
})
